<template>
	<view class="content">
		<view class="yhqsyxq row">
			<view class="col-7 yhqzb t_center">
				<view class="yhqje">
					<text>￥</text>{{detial.amount}}
				</view>
				<view class="yhqlx">
					<text>{{detial.typeText}}</text>
				</view>
			</view>
			<view class="col-17 yhqyb">
				<view class="row">
					<view class="col-22 off-2 yhqttm t_size_28 t_size_bold">
						{{detial.name}}
					</view>
					<view class="col-22 off-2 yhqyxq t_size_28">
						有效期：{{detial.expireDateStart}}至{{detial.expireDateEnd}}
					</view>
					<view class="col-22 off-2 yhqsyfw t_size_28">
						<view class="row">
							<view class="col-12">
								{{detial.expireDateText }}
							</view>
							<view class="col-8 off-2">
								<button type="primary">立即使用</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="yhqsygz">
			<view class="sygztt t_size_bold">
				使用须知
			</view>
			<view class="sygzxq">
				{{detial.instructions }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id: 0,
				detial:{
					amount: 0, //优惠券金额 ,
					amountMax: 0, //最大金额，0表示不限制 ,
					amountMin: 0, //最小金额，0表示不限制 ,
					discount:0, //折扣率 ,
					expireDateEnd: 0, //有效期结束时间 ,
					expireDateStart: 0, //有效期开始时间 ,
					expireDateText: "", //有效期说明文字 ,
					id: 0, //优惠券ID ,
					instructions: "", //使用须知 ,
					isUse: 1, //优惠券使用状态：1未使用、2已使用 ,
					name: "", //优惠券名称 ,
					type: 1, //优惠券类型：1满减、2折扣 ,
					typeService: 1, //可用业务类型：0不限制、1城际打车、2市内约车 ,
					typeServiceText: "", //可用业务类型说明文字 ,
					typeText: "" //优惠券类型说明文字
				}
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		methods: {
			async load(){
				let res = await this.$api.request(this.$api.intercity.getinfo,{couponId: this.id});
				if(res){
					this.detial = res;
				}
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 92%;
		padding: 31rpx 4%;
	}
	.yhqsyxq{
		height: 200rpx;
		box-shadow: 0px 10rpx 15rpx 0px #EDEDED;
		display: table;
		.yhqzb{
			display: table-cell;
			vertical-align: middle;
			height: 100%;
			background: linear-gradient(0deg, #6CBF30 0%, #A2E672 100%);
			color: #FFFFFF;
			.yhqje{
				height: 55rpx;
				line-height: 25rpx;
				font-size: 58rpx;
				text{
					font-size: 30rpx;
				}
			}
			.yhqlx{
				height: 35rpx;
				line-height: 45rpx;
				font-size: 24rpx;
				text{
					padding: 5rpx 25rpx;
					border-radius: 35rpx;
					background-color: #FFFFFF;
					color: #6CBF30;
				}
			}
		}
		.yhqyb{
			display: table-cell;
			height: 170rpx;
			padding: 15rpx 0;
			.yhqttm{
				color: #333333;
				height: 27rpx;
				padding-bottom: 19rpx;
				overflow: hidden;
			}
			.yhqyxq{
				color: #999999;
				height: 27rpx;
				padding-bottom: 19rpx;
				overflow: hidden;
			}
			.yhqsyfw{
				height: 78rpx;
				overflow: hidden;
				.row{
					height: 78rpx;
					line-height: 78rpx;
					.col-14{
						color: #999999;
					}
					button{
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 30rpx;
						font-size: 28rpx;
						margin-top: 9rpx;
						padding: 0;
						background-color: #6CBF30;
					}
				}
			}
		}
	}
	.yhqsygz{
		margin-top: 59rpx;
		.sygztt{
			color: #333333;
			font-size: 35rpx;
		}
		.sygzxq{
			margin-top: 28rpx;
			color: #999999;
		}
	}
</style>
